<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h3>{{msg}}</h3>
    <div v-if="isShow">我是一个容器</div>
    <!-- 点按钮隐藏上面div容器 -->
    <!-- 1. 指令绑定事件后指定：js表达式 -->
    <button v-on:click="isShow=false">隐藏容器1</button>
    <!-- 2. 使用@可以简化v-on:的使用 一样是绑定事件 -->
    <button @click="isShow=false">隐藏容器2</button>
    <!-- 3. 指令绑定事件后指定：函数 -->
    <!-- 3.1 如果处理函数不需要传参，你带不带括号效果一样 -->
    <button @click="fn">隐藏容器3</button>
    <button @click="fn()">隐藏容器4</button>
    <!-- 3.2 如果处理函数中需要事件对象 -->
    <!--     如果绑定事件的时候，函数不带扩号，触发函数的时候默认传入事件对象 -->
    <button @click="fn2">按钮1</button>
    <!--     如果绑定事件的时候，函数带了扩号，需要自己传入事件对象，vue提供了一个 $event 的参数 -->
    <button @click="fn2($event)">按钮2</button>
    <!-- 3.3 如果处理函数中需要事件对象以及其他传参 -->
    <button @click="fn3($event, 10)">按钮3</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hi vue',
        isShow: true
      },
      methods: {
        fn () {
          // 当你需要处理复杂逻辑的时候，建议使用函数
          this.isShow = false
        },
        fn2 (e) {
          console.log(e)
        },
        fn3 (e, num) {
          console.log(e,num)
        }
      }
    })
  </script>
</body>
</html>